<template>
    <d2-container :class="{'page-compact':crud.pageOptions.compact}">
        <d2-crud-x
                ref="d2Crud"
                v-bind="_crudProps"
                v-on="_crudListeners"
        @caseTest="caseTest"
        @showResult="showResult">

            <div slot="header">
              <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"  >
                  <template slot="suffix">
            <el-dropdown split-button type="primary" size="small">
              请选择测试环境
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in evn_list" :key="index" @click.native="handleClick(item)">
                  {{ item.env_name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-tag style="margin-left: 10px">{{ select_env }}</el-tag>
          </template>
              </crud-search>
                <el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
                <el-button size="small" type="danger" @click="batchDelete"><i class="el-icon-delete"></i> 批量删除</el-button>
                <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"/>
            </div>
            <span slot="PaginationPrefixSlot" class="prefix" >
                <el-button class="square" size="mini" title="批量删除"   @click="batchDelete" icon="el-icon-delete" :disabled="!multipleSelection || multipleSelection.length===0"  />
            </span>

           <template slot="cronSlot" slot-scope="scope">
             <el-tag size="mini">{{scope.row['cron']?scope.row['cron']:'没有设置自动化'}}</el-tag>
         </template>
        </d2-crud-x>
       <div>
      <el-drawer
        title="测试结果"
        :visible.sync="resultShow"
        direction="rtl"
        size="70%"
        >
        <div>
          <api_result v-if="resultShow" :case-obj="caseObj"></api_result>
        </div>
      </el-drawer>
    </div>

    </d2-container>
</template>

<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import * as api from './api'
import * as env_api from '@/views/api_envinfo/api'
import api_result from '@/views/api_result'
export default {
  name: 'api_testcase',
  components: { api_result },
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      evn_list: [],
      select_env: '没有选择环境',
      select_obj: undefined,
      caseObj: undefined,
      resultShow: false
    }
  },
  mounted () {
    this.env_init()
  },
  methods: {
    env_init () {
      env_api.GetList().then(ret => {
        console.log(ret)
        this.evn_list = ret.data.data
        for (let i = 0; i < this.evn_list.length; i++) {
          const evnItem = this.evn_list[i]
          console.log(evnItem)
          if (evnItem.default === true) {
            this.select_env = evnItem.env_name
            this.select_obj = evnItem
          }
        }
      })
    },
    handleClick (item) {
      console.log('点击了：', item)
      this.select_env = item.env_name
      this.select_obj = item
    },
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      console.log(row)
      if (row.cron !== undefined) {
        if (this.select_obj === undefined) {
          this.$message({
            type: 'error',
            message: '没有选择环境'
          })
          return
        }
        row.env = this.select_obj
      }
      return api.AddObj(row)
    },
    updateRequest (row) {
      if (row.cron !== undefined) {
        if (this.select_obj === undefined) {
          this.$message({
            type: 'error',
            message: '没有选择环境'
          })
          return
        }
        row.env = this.select_obj
      }
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    batchDelRequest (ids) {
      return api.BatchDel(ids)
    },
    infoRequest (row) {
      return api.GetObj(row.id)
    },
    caseTest (scope) {
      console.log('------------')
      console.log(scope.row)
      if (this.select_obj === undefined) {
        this.$message.error('没有选择环境')
        return
      }
      const data = scope.row
      data.env = this.select_obj
      api.caseTest(data).then(rt => {
        this.$message.success(rt.msg)
      }).catch(rt => {
        this.$message.error(rt.msg)
      })
    },
    showResult (scope) {
      this.resultShow = true
      this.caseObj = scope.row
    }
  }
}
</script>
